import { Component, OnInit, ViewChild } from '@angular/core';
import { ColumnType, SPage, TablePageComponent } from '@shared/components/table-page/table-page.component';
import { _HttpClient, ModalHelper } from '@delon/theme';
import { NzMessageService, NzModalService } from 'ng-zorro-antd';
import { ApiService } from '@core/services/api';
import { STData,STRes } from '@delon/abc';
import { UtilService } from '@core/services/util.service';
declare var QRCode

@Component({
  selector: 'app-order-list',
  templateUrl: './order-list.component.html',
  styles: []
})
export class OrderListComponent implements OnInit {
  @ViewChild('st', { static: false }) st: TablePageComponent;
  selectData: any;
  loading = false;
  showTable:boolean=false;
  config: SPage = {
    columns: [
      {
        index: 'id',
        title: '选择',
        type: ColumnType.radio,
        filter: {
          index:"communityId",
          type:'select',
          placeholder:"所属社区",
          items:[{label:'',value:''}],
          change: (value, orgData) => {
            this.config.columns[0].filter.items.forEach(item=>{
              if(item.value == value){
                this.getCommunity(item.label);
              }
            })
          },
        }
      },
      {
        index: 'personName',
        title: '用户姓名',
        width:100,
        type:ColumnType.tag,
        filter: {
          items:[{label:'',value:''}],
          index:'areaId',
          placeholder: '所属小区',
          type: 'select',
        }
      },
      {
        index: 'personType',
        title: '人员类型',
        width:100,
        type:ColumnType.tag,
        filter:{
          index:"personName",
          type:"string",
          placeholder:"用户姓名"
        }
      },
      {
        index: 'businessType',
        title: '业务类型',
        width:100,
        type:ColumnType.tag,
        filter:{
          index:"payCard",
          type:"string",
          placeholder:"卡号"
        }
     
      },
      {
        index: 'payCard',
        title: '卡号',
        width:100,
        type:ColumnType.tag,
        fFn: (item, columu) =>{
          if(item.payCard == null){
            return "";
          }else{
            return this.delCardZero(item.payCard);
          }
        },
        filter:{
          index:"payRemark",
          placeholder:"支付状态",
          type:"select",
          items:[
            {label:"未支付",value:1},
            {label:"支付中",value:2},
            {label:"已完成",value:3},
            {label:"已过期",value:4}
          ]
        }
      },
      {
        index: 'areaName',
        title: '地址',
        width:400,
        type:ColumnType.tag,
        filter:{
          index:"businessType",
          placeholder:"业务类型",
          type:"select",
          items:[
            {label:"新办",value:1},
            {label:"续期",value:2},
            {label:"补办",value:3},
            {label:"注销",value:4}
          ]
        }
      },
      {
        index: 'payDeposit',
        title: '押金(元)',
        width:100,
        fFn:(item, columu)=>{
          return item.payDeposit / 100 + "";
        },
        filter: {
          index:'startDate',
          placeholder: '支付时间(起)',
          type: 'date'
        }
       
      },
      {
        index: 'monthServe',
        title: '计费月数',
        width:100,
        filter: {
          index:'endDate',
          placeholder: '支付时间(止)',
          type: 'date'
        }
       
      },
      {
        index: 'monthMoney',
        title: '月管理费(元)',
        width:100,
        fFn:(item, columu)=>{
          return item.monthMoney / 100 + "";
        },
        filter: {
          index:'createBy',
          placeholder: '办理人',
          type: 'string',
        }
      },
      {
        index: 'payMoney',
        title: '合计费用(元)',
        width:100,
        fFn:(item, columu)=>{
          return item.payMoney / 100 + "";
        }
      },
      {
        index: 'startTime',
        title: '开始时间',
        width:150,
       
      },
      {
        index: 'endTime',
        title: '到期时间',
        width:150,
      },
      {
        index: 'createBy',
        title: '办理人',
        width:100,
      },
      {
        index: 'createTime',
        title: '办理时间',
        width:150,
      },
      {
        index: 'payTime',
        title: '支付时间',
        width:150,
      },
      {
        index: 'payRemark',
        title: '支付状态',
        width:100,
        type:ColumnType.tag,
        fixed:"right",
        tag:{
          1:{text:'未支付'},
          2:{text:'支付中'},
          3:{text:'已完成'},
          4:{text:'已过期'}
        },
        filter:{
          index:"createId",
          type:ColumnType.checkbox,
          items:[
            {label:"只统计当前账号产生的费用",value:"1"}
          ]
       }
      },
    ],
    showCheckBox: false,
    reqUrl:this.api.pay.payList.url,
    defaultParam:{"userType":JSON.parse(this.util.getStorage("userNow")).userType}
  }
  constructor(private http: _HttpClient,  private api: ApiService, private modal: NzModalService, private message: NzMessageService,private util:UtilService) { }

  //删除卡号后面的8个0
  delCardZero(num:string):string{
    if(num.length > 8){
      num = num.substring(0,num.length - 8);
    }
    return num;
  }

  ngOnInit() { 
    //this.getData();
    this.getArea().then(res=>{
      this.feachCommunity();
    })
  }

   //获取小区下拉框数据
   feachCommunity(){
    this.http.post(this.api.area.list.url, {areaRank:6}).subscribe((res: any) => {
      console.log(res)
     if (res.status == '200') {
       if(res.data.length == 0){
        this.config.columns[1].filter.items=[{label:'',value:''}]
       }else{
          this.config.columns[1].filter.items= res.data.map(item => {
              return {
                label: item.areaName,
                value: item.id
              }
          });
       }
       this.showTable=true;
     }
   })
 }
 //获取社区下拉框数据
 getArea(){
  return new Promise<void>((resolve) => {
    this.http.post(this.api.area.page.url, {areaRank: '5'}).subscribe((res: any) => {
      console.log(res)
      if (res.status == '200') {
        if(res.data.list.length > 0){
          this.config.columns[0].filter.items= res.data.list.map(item => {
            return {
              label: item.areaName,
              value: item.id
            }
          });
        }
        resolve();
      }
    })
  }) 
 }
  //根据社区获取小区下拉框数据
  getCommunity(area:string){
      this.http.post(this.api.area.page.url, {areaRank: '6',areaParentAllName:area}).subscribe((res: any) => {
        if (res.status == '200') {
          if(res.data.list.length > 0){
            this.config.columns[1].filter.items= res.data.list.map(item => {
              return {
                label: item.areaName,
                value: item.id
              }
            });
          }else{
            this.config.columns[1].filter.items=[];
          }
          const statusProperty = this.st.sf.getProperty('/city')!;
          statusProperty.widget.reset("");
        }
      })
   }


  dataProcess(data: STData[]){
    return data;
  }

  getData(){
    this.http.post(this.api.pay.payList.url,{}).subscribe((res)=>{
      console.log(res);
      this.config.data=res.data;
    })
  }
  _console(e: any): void {
    this.selectData = e;
  }

    //导出
    export(){
      this.loading=true;
      let body:any={};
      if(this.st.st.req.params != undefined){
        body=this.st.st.req.params;
      }
      body.pageNum=1;
      body.pageSize=this.st.st.total;
      this.http.post(this.api.pay.payList.url,body).subscribe(res => {
        this.loading=false;
        if(res.status == 200 && res.data.list.length > 0){
          let data=res.data.list;
           this.st.st.export(data,{
            filename : "办理记录.xlsx"
          })
        }else{
          this.message.error(res.message);
        }
      })
    
  
    }
    //重新发起支付
    rePay(){
      console.log(this.selectData);
      if(this.selectData == undefined){
        this.message.error("请选择订单!");
        return;
      }
      if(this.selectData.payTimeStatus == 0){//已过期
        this.message.error("订单已过期!");
        return;
      }
      if(this.selectData.payRemark != 2){
        this.message.error("请选择支付中的订单!");
        return;
      }
      this.modal.confirm({
        nzTitle:"确定重新支付?",
        nzOnOk:()=>{
          let url=this.selectData.picPath;
          const modal = this.modal.create({
            nzTitle: '付款码',
            nzContent: '<div class="qrcode"></div>',
            nzWidth: 400,
            nzFooter: [
              {
                label:"支付完成",
                type:"primary",
                onClick:()=>{
                   modal.close();
                   this.st.reload();
                }
              }
            ],
          })
          modal.afterOpen.subscribe(()=>{
            new QRCode(document.getElementsByClassName("qrcode")[0],{
              width:350,
              height:350
            }).makeCode(url);
          })
        }
      })
    }
    //取消支付
    cancelPay(){
      if(this.selectData == undefined){
        this.message.error("请选择订单!");
        return;
      }
      if(this.selectData.payTimeStatus == 0){//已过期
        this.message.error("订单已过期!");
        return;
      }
      if(this.selectData.payRemark != 2){
        this.message.error("请选择支付中的订单!");
        return;
      }
      this.modal.confirm({
        nzTitle:"确定取消支付?",
        nzOnOk:()=>{
          this.http.post(this.api.pay.cancelPay.url,{serialNumber:this.selectData.serialNumber}).subscribe(res=>{
            if(res.status == 200){
              this.message.success(res.message);
              this.st.reload();
            }else{
              this.message.error(res.message);
            }
          })
        }
      })
    }

    

}
